/**
* 功能描述: 功能单选按钮demo
* @author 崔孝楠
* @date 2022/9/29 15:06
* @version 1.0
*/
<template>
  <div>
    <!-- 选中状态 -->
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Hangzhou</span>
    </label>
    <!-- 基础状态 -->
    <label class="yw-radio-button-wrapper">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Shanghai</span>
    </label>
    <!-- 禁用状态 -->
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Beijing</span>
    </label>
    <!-- large -->
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-large">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input">
        <span class="yw-radio-button-inner"></span>
      </span><span>large</span>
    </label>
    <!-- small -->
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-small">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input">
        <span class="yw-radio-button-inner"></span>
      </span><span>small</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>
